<template>
  <view class="content">
    <view class="top">
      <uni-nav-bar rightIcon="gear-filled" color="white" backgroundColor="rgb(55, 138, 241)" :border="false">
      </uni-nav-bar>
      <view class="img-boxs">
        <image :src="userInfo.avatar" @click="handleUpImg"></image>
      </view>
      <view class="username">
        <text>{{ userInfo.name }}</text>
      </view>
    </view>

    <uni-card :is-shadow="false">
      <text class="card-title">我的交易</text>
      <template v-slot:actions>
        <view class="card-actions-item" @click="goToMyUpload">
          <text class="card-actions-item-num">{{ userInfo.upload }}</text>
          <br>
          <text class="card-actions-item-text">我的上传</text>
        </view>
        <view class="card-actions-item" @click="goToMyForm">
          <text class="card-actions-item-num">{{ userInfo.myForm }}</text>
          <br>
          <text class="card-actions-item-text">我的订单</text>
        </view>
        <view class="card-actions-item" @click="goToDownload">
          <text class="card-actions-item-num">{{ userInfo.download }}</text>
          <br>
          <text class="card-actions-item-text">我的下载</text>
        </view>
      </template>
    </uni-card>

    <view>
      <view @click="goTo1">
        <hr>
        <uni-nav-bar left-icon="folder-add" left-text="我的收藏" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
      <view @click="goTo2">
        <uni-nav-bar left-icon="contact" left-text="我的认证" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
      <view @click="goTo3">
        <uni-nav-bar left-icon="wallet" left-text="我的钱包" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
      <view @click="goTo4">
        <uni-nav-bar left-icon="redo" left-text="分享" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
      <view @click="goTo5">
        <uni-nav-bar left-icon="info" left-text="关于" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
      <view @click="goTo6">
        <uni-nav-bar left-icon="phone" left-text="联系客服" leftWidth="200px" rightIcon="right" height="50px">
        </uni-nav-bar>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello!have a nice day',
      userInfo: {
        //avatar: localStorage.getItem('domain') + '/user/getUserAvatar?userId=' + localStorage.getItem('userId'),
        avatar: '../../static/tx.png',
        name: '柠檬精',
        upload: '1',
        myForm: '0 ',
        download: '1',
      }
    }
  },
  methods: {
    goTo1() {
      uni.navigateTo({
        url: '/pages/member/Personal-collection?name=我的收藏',
      })
    },
    goTo2() {
      uni.navigateTo({
        url: '/pages/member/renzheng?name=我的认证',
      })
    },
    goTo3() {
      uni.navigateTo({
        url: '/pages/member/wallet?name=我的钱包',
      })
    },
    goTo4() {
      uni.navigateTo({
        url: '/pages/member/share?name=分享',
      })
    },
    goTo5() {
      uni.navigateTo({
        url: '/pages/member/about?name=关于',
      })
    },
    goTo6() {
      uni.navigateTo({
        url: '/pages/member/contact?name=联系客服',
      })
    },
    handleUpImg() { // 点击图片区域，选择图片并上传
      let that = this
      uni.chooseImage({ // 选择图片
        count: 1,
        success: (res) => { // 图片选择成功的回调（必传），会返回一个对象
          console.log(res)
          that.$axios.post('/user/uploadAvatar', {
            avatar: res.tempFiles[0]
          }, {
            headers: {
              token: localStorage.getItem('token'),
              "Content-Type":'multipart/form-data'
            }
          }).then(data => {
            if (data.data.code === 200) uni.showToast({title: '头像上传成功'})
            that.userInfo.avatar = res.tempFilePaths[0] // 用于更新视图
          }).catch(err => {
            console.log(err)
            uni.showToast({title: '头像上传失败'})
          })


          // uni.uploadFile({
          // 	url: "/hospital/user/updateAvatar", // 请求地址
          // 	filePath: res.tempFilePaths[0], // 临时文件路径
          // 	name: "avatarfile", // 文件对应的key值
          // 	header: {
          // 		type: "client" // 需要带的请求头，token等等
          // 	},
          // 	formData: { // 额外的请求数据
          // 		uesrName: this.userInfo.userName
          // 	},
          // 	success: (res) => { // 成功后的回调
          // 		console.log("修改成功");
          // 	}
          // })
        }
      })
    },
    goToMyForm() {
      uni.navigateTo({
        url: '/pages/member/myForm'
      })
    },
    goToDownload() {
      uni.navigateTo({
        url: '/pages/member/Personal-download'
      })
    },
    goToMyUpload() {
      uni.navigateTo({
        url: '/pages/member/myUpload'
      })
    }
  },
  //开始加载时，获取我的订单个数(现在的逻辑，订单数和我的下载数一致)，我的上传个数，显示页面上
  onLoad() {
    let that = this
    //TODO 接口
    this.$axios.get('/goods/goods/mine',{
      headers: {
        token: localStorage.getItem('token')
      }
    }).then(res => {
      that.userInfo.upload = res.data.data.length;
    })

    this.$axios.get('/order/search',{
      headers: {
        token: localStorage.getItem('token')
      }
    }).then(res => {
      //TODO 返回格式
      that.userInfo.myForm = res.data.data.data.length;
      that.userInfo.download = res.data.data.data.length;
    })
  },
}
</script>

<style>
.top {
  width: 100%;
  height: 200px;
  background-color: rgb(55, 138, 241);
}

h2 {
  color: aquamarine;
  text-align: center;
}

.img-boxs {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
  background-color: honeydew;
  margin: 0 auto;
}

.img-boxs image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin-bottom: 10px;
}

.username {
  color: #fff;
  margin: 5px auto;
  text-align: center;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.card-actions-item {
  display: inline-block;
  width: 33%;
  margin: 5px auto;
  text-align: center;
  font-size: 20px;
}

.card-actions-item-num {
  font-size: 50px;
}
</style>
